import { CalendarOption } from '@/store/constant'
import calendar from 'dayjs/plugin/calendar'
dayjs.extend(calendar)
const starId = '1cbdcf27-43ce-446d-9186-e6a07f4d1f18'
const list = [
  {
    message_id: '9d70fbf7-cbc5-4843-a0db-825f7fbf1efc17047949548863007',
    text: 'Hi Good Morning!',
    create_time: 1704794955079
  },
  {
    message_id: '9d70fbf7-cbc5-4843-a0db-825f7fbf1efc17047949568017174',
    text: 'Hey. Very Good morning. How are you?',
    create_time: 1704794956988
  },
  {
    message_id: '9d70fbf7-cbc5-4843-a0db-825f7fbf1efc17047949593848513',
    text: 'I need your minute, are you available?',
    create_time: 1704794959566
  },
  {
    message_id: '1cbdcf27-43ce-446d-9186-e6a07f4d1f181704794964043',
    text: 'ftgyhu',
    create_time: 1704794964358
  },
  {
    message_id: '1cbdcf27-43ce-446d-9186-e6a07f4d1f181704794965580',
    text: "yes, I'm available",
    create_time: 1705480121088
  }
]
const isStar = (id: string) => id.includes(starId)
const MsgList = () => {
  return (
    <Stack direction="column" spacing={1.5}>
      {list.map((msg) => (
        <Stack key={msg.message_id} flexDirection={isStar(msg.message_id) ? 'row-reverse' : 'row'}>
          <Stack key={msg.message_id} spacing={0.5}>
            <Typography
              variant="body2"
              color="text.secondary"
              fontSize="0.75rem"
              alignSelf={isStar(msg.message_id) ? 'flex-end' : 'flex-start'}
            >
              {dayjs().calendar(dayjs(msg.create_time), CalendarOption)}
            </Typography>
            <Box sx={{ bgcolor: isStar(msg.message_id) ? 'secondary.light' : 'primary.light', padding: 2, borderRadius: 2 }}>
              <Typography variant="body1">{msg.text}</Typography>
            </Box>
          </Stack>
        </Stack>
      ))}
    </Stack>
  )
}

export default MsgList
